<template>
	<view class="content">
		<!-- 左菜单栏 -->
		<view class="left-menu" style="flex: 1; height: 100%;">
			<view :class="['item', {selected: showIndex==1}]" @click="showIndex=1">
				<text>推荐</text>
			</view>
			<view :class="['item', {selected: showIndex==2}]" @click="showIndex=2">
				<text>搜索</text>
			</view>
			<view :class="['item', {selected: showIndex==3}]" @click="showIndex=3">
				<text>更新</text>
			</view>
		</view>
		<!-- 右显示栏 -->
		<!-- 这里的overflow: hidden;是用于防止溢出的, 否则会将菜单顶掉. 目前没有找到好的解决办法 -->
		<view class="" style="flex: 3; height: 100%; overflow: hidden;">
			<!-- 2.App 推荐卡片，卡片内容为 App 图标、背景、名称、介绍、
				【下载】按钮， 点击【下载】按钮进行 App 下载安装。卡片下方展
				示专题列表，专题列表为本周热门 App 列表，列表包括 App 名称、
				App 缩略图、下载次数、【下载】按钮，点击【下载】按钮可下载对
				应App（管理服务端可进行 App 上传，推荐状态的修改等功能）。 -->
			<template v-if="showIndex==1">
				<view class="subpage">
					<view class="title"><span>I</span>推荐</view>
					<!-- 推荐卡片组 -->
					<view class="tuijian" style="display: flex; overflow: auto;">
						<!-- 推荐卡片 -->
						<view class="list-item" v-for="(item, index) in recommandApp" :key="index">
							<view class="icon">
								<image :src="item.icon" mode=""></image>
							</view>
							<view class="name">
								{{item.name}}
							</view>
							<view class="name desc">
								{{item.desc}}
							</view>
							<button type="default">下载</button>
						</view>
					</view>
					<view class="title"><span>I</span>本周热门</view>
					<!-- 本周热门App组 -->
					<view class="hot">
						<!-- 热门App item -->
						<view class="row-list" v-for="(item, index) in hotApp" :key="index">
							<!-- 图标 -->
							<image src="../../static/logo.png" mode=""></image>
							<view class="detail">
								<!-- 名称 -->
								<view class="name">
									{{item.name}}
								</view>
								<!-- 下载次数 -->
								<view class="name desc">
									{{item.downloadCount}}
								</view>
							</view>
							<button type="default">下载</button>
						</view>
					</view>
				</view>
			</template>

			<template v-if="showIndex==2">
				<view class="subpage">
					B
				</view>
			</template>

			<template v-if="showIndex==3">
				<view class="subpage">
					C
				</view>
			</template>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showIndex: 1,
				// 图标、背景、名称、介绍、【下载】
				recommandApp: [{
					icon: '../../static/logo.png',
					bgImg: '',
					name: 'AAA',
					desc: 'A-desc'
				}, {
					icon: '../../static/logo.png',
					bgImg: '',
					name: 'BBB',
					desc: 'B-desc'
				}, {
					icon: '../../static/logo.png',
					bgImg: '',
					name: 'CCC',
					desc: 'C-desc'
				}],
				// App 名称、App 缩略图、下载次数
				hotApp: [{
						icon: '../../static/logo.png',
						name: 'AAA',
						downloadCount: 100
					},
					{
						icon: '../../static/logo.png',
						name: 'BBB',
						downloadCount: 200
					},
					{
						icon: '../../static/logo.png',
						name: 'CCC',
						downloadCount: 300
					},
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page{
		page{
			background: linear-gradient(#e4f2fc 40%, white 60%);
		}
	}
	view {
		/* border: 1px solid #007AFF; */
		box-sizing: border-box;
	}
	.title{
		margin: 60rpx 60rpx 0;
		font-size: 45rpx;
	}
	.title>span{
		margin-right: 20rpx;
	}
	.subpage {
		width: 100%;
		height: 100%;
		overflow: auto;
		
	}
	.tuijian{
		margin:30rpx 60rpx;
		box-shadow: 0 1rpx 12rpx rgba(0,0,0,0.1);
	}
	.list-item{
		padding: 60rpx;
	}
	.icon>image{
		width: 300rpx;
		height: 300rpx;
	}
	.name{
		font-size: 50rpx;
		text-align: center;
		
	}
	.desc{
		font-size: 36rpx;
		color: #555555;
	}
	.list-item>button{
		width: 180rpx;
		border-radius: 120rpx;
		background-color: #d8e9f1;
	}
	.content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.left-menu{
		    display: flex;
		    justify-content: space-around;
		    flex-direction: column;
		    align-items: center;
			box-shadow: 0 1rpx 12rpx rgba(0,0,0,0.1);
			/* border-right:1rpx solid #C8C7CC; */
	}
	.left-menu>.selected {
		background-color: #cee8fc;
	}

	.left-menu>.item {
		width: 400rpx;
		height: 300rpx;
		cursor: pointer;
		border-radius: 120rpx;
		text-align: center;
		line-height: 300rpx;
		font-size: 50rpx;
	}
	.hot{
		padding: 60rpx;
	}
	.row-list{
		display: flex;
		line-height: 150rpx;
		height: 300rpx;
		margin-bottom: 60rpx;
		align-items: center;
		box-shadow: 0 1rpx 12rpx rgba(0,0,0,0.1);
	}
	.row-list>image{
		width: 300rpx;
		height: 300rpx;
	}
	.row-list>button{
		margin-left: 700rpx;
		height: 90rpx;
		width: 180rpx;
		border-radius: 120rpx;
		background-color: #d8e9f1;
	}
	.detail{
		margin-left: 240rpx;
	}
</style>
